<template>
  <div class="app-container">
    <div class="filter-container"></div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
        <el-form-item label="企业类型" prop="merchantType">
            <el-radio-group v-model="ruleForm.merchantType" :disabled="disabled">
                <el-radio label="4">企业</el-radio>
                <el-radio label="5">个体工商户</el-radio>
                <el-radio label="6">个人</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="法人姓名" prop="lawyer">
            <el-input v-model="ruleForm.lawyer" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号" prop="idCardNo">
            <el-input v-model="ruleForm.idCardNo" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="法人手机号" prop="lawerPhone">
            <el-input v-model="ruleForm.lawerPhone" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证有效期类型" prop="lawyerCardEnd">
            <el-switch
                v-model="ruleForm.lawyerCardEnd"
                inactive-text="定期"
                active-text="长期"
                active-value="长期"
                :disabled="disabled">
            </el-switch>
        </el-form-item>
        <el-form-item label="法人身份证有效期(起始)" prop="lawyerCardBgn">
            <el-date-picker
                v-model="ruleForm.lawyerCardBgn"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="法人身份证截止日期(截止)" prop="lawyerCardEnd" v-if="ruleForm.lawyerCardEnd!='长期'">
            <el-date-picker
                v-model="ruleForm.lawyerCardEnd"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="商户简称" prop="merchantShortName" ref="merchantShortName">
            <el-input v-model="ruleForm.merchantShortName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="线下门店名称" prop="merchantName">
            <el-input v-model="ruleForm.merchantName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="mobileUsername">
            <el-input v-model="ruleForm.mobileUsername" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="营业执照名称" prop="licenseName" v-if="ruleForm.merchantType!=6">
            <el-input v-model="ruleForm.licenseName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="营业执照号" prop="license" v-if="ruleForm.merchantType!=6">
            <el-input v-model="ruleForm.license" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="营业执照有效期类型" prop="licenseCardEnd" v-if="ruleForm.merchantType!=6">
            <el-switch
                v-model="ruleForm.licenseCardEnd"
                inactive-text="定期"
                active-text="长期"
                active-value="长期"
                :disabled="disabled">
            </el-switch>
        </el-form-item>
        <el-form-item label="营业执照有效期(起始)" prop="licenseCardBgn" v-if="ruleForm.merchantType!=6">
            <el-date-picker
                v-model="ruleForm.licenseCardBgn"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="营业执照有效期(截止)" prop="licenseCardEnd" v-if="ruleForm.licenseCardEnd!='长期'&&ruleForm.merchantType!=6">
            <el-date-picker
                v-model="ruleForm.licenseCardEnd"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="经营地址" prop="saleAddress" ref="saleAddress">
            <el-input v-model="ruleForm.saleAddress" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="门店所在地" prop="areas" ref="areas">
            <el-cascader v-model="ruleForm.areas" :options="areaList" :props="{value:'name',label:'name',children:'sub'}" filterable :disabled="disabled"></el-cascader>
        </el-form-item>
        <el-form-item label="客服电话" prop="servicePhone">
            <el-input v-model="ruleForm.servicePhone" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="linkName" ref="linkName">
            <el-input v-model="ruleForm.linkName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号" prop="phone">
            <el-input v-model="ruleForm.phone" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系人身份证号" prop="superIdCard">
            <el-input v-model="ruleForm.superIdCard" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系人邮箱" prop="email">
            <el-input v-model="ruleForm.email" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="结算类型" prop="accountType">
            <el-radio-group v-model="ruleForm.accountType" :disabled="disabled">
                <el-radio label="1" :disabled="disabled||ruleForm.merchantType==6">对公</el-radio>
                <el-radio label="2">对法人</el-radio>
                <el-radio label="3">非法人</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="商户费率" prop="transRuleType">
            <el-input v-model="ruleForm.transRuleType" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="对公入账账号" prop="accountNo" v-if="ruleForm.accountType==1">
            <el-input v-model="ruleForm.accountNo" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="对公入账户名" prop="accountName" v-if="ruleForm.accountType==1">
            <el-input v-model="ruleForm.accountName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="入账银行卡号" prop="accountNo" v-if="ruleForm.accountType!=1">
            <el-input v-model="ruleForm.accountNo" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="入账人姓名" prop="accountName" v-if="ruleForm.accountType!=1">
            <el-input v-model="ruleForm.accountName" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="bankName">
            <el-select v-model="ruleForm.bankName" filterable @change="getSubBankList" placeholder="请选择" :disabled="disabled">
                <el-option
                    v-for="(item,index) in bankList"
                    :key="index"
                    :label="item.bankname"
                    :value="item">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="开户行所在地" prop="accountArea" ref="accountArea">
            <el-cascader v-model="accountArea" :options="areaList" :props="{value:'name',label:'name',children:'sub'}" filterable :disabled="disabled"></el-cascader>
        </el-form-item>
        <el-form-item label="开户支行" prop="subBranchName">
            <el-select v-model="ruleForm.subBranchName" filterable remote reserve-keyword :remote-method="getSubBankList" @change="getCnapsNo" placeholder="请选择" :disabled="disabled">
                <el-option
                    v-for="item in subBankList"
                    :key="item.bankNo"
                    :label="item.subBranchName"
                    :value="item.subBranchName">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="银行预留手机号" prop="reservedPhone">
            <el-input v-model="ruleForm.reservedPhone" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="入账人身份证号" prop="holderCardNo" v-if="ruleForm.accountType!=1">
            <el-input v-model="ruleForm.holderCardNo" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="入账人身份证有效期类型" prop="holderCardEnd" v-if="ruleForm.accountType!=1">
            <el-switch
                v-model="ruleForm.holderCardEnd"
                inactive-text="定期"
                active-text="长期"
                active-value="长期"
                :disabled="disabled">
            </el-switch>
        </el-form-item>
        <el-form-item label="入账人身份证有效期(起始)" prop="holderCardBgn" v-if="ruleForm.accountType!=1">
            <el-date-picker
                v-model="ruleForm.holderCardBgn"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="入账人身份证截止日期(截止)" prop="holderCardEnd" v-if="ruleForm.accountType!=1&&ruleForm.holderCardEnd!='长期'">
            <el-date-picker
                v-model="ruleForm.holderCardEnd"
                type="date"
                placeholder="选择日期"
                :disabled="disabled"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结算周期" prop="d0Flag">
            <el-radio-group v-model="ruleForm.d0Flag" :disabled="disabled">
                <el-radio label="0">D+1</el-radio>
                <el-radio label="1">T+1</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input
                type="textarea"
                placeholder="备注"
                v-model="ruleForm.remark"
                maxlength="30"
                :autosize= {minRows:3,maxRows:6}
                show-word-limit
                :disabled="disabled">
            </el-input>
        </el-form-item>
        <el-form-item label="法人证件人像面照片" prop="type120">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type120'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type120" :src="ruleForm.type120" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenA">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="法人证件国徽面照片" prop="type130">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type130'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type130" :src="ruleForm.type130" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenB">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="法人手持身份证照" prop="type160">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type160'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type160" :src="ruleForm.type160" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shouchi">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="营业执照" prop="type70" v-if="ruleForm.merchantType!=6">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type70'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type70" :src="ruleForm.type70" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhizhao">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="对公账户许可" prop="type110" v-if="ruleForm.accountType==1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type110'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type110" :src="ruleForm.type110" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账人身份证人像面照片" prop="type60" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type60'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type60" :src="ruleForm.type60" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenA">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账人身份证国徽面照片" prop="type50" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type50'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type50" :src="ruleForm.type50" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shenfenB">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账人手持身份证人像面照片" prop="type90" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type90'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type90" :src="ruleForm.type90" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shouchi">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账人持证照" prop="type140">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type140'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type140" :src="ruleForm.type140" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="储蓄卡卡正面照片" prop="type40">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type40'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type40" :src="ruleForm.type40" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_card">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="门店门头照" prop="type10">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type10'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type10" :src="ruleForm.type10" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_mentou">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="门店内部经营照" prop="type20">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type20'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type20" :src="ruleForm.type20" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_mennei">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="收银台照" prop="type30">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type30'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type30" :src="ruleForm.type30" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_shouyin">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="门店租赁合同" prop="type100">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type100'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type100" :src="ruleForm.type100" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账授权书" prop="type80" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type80'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type80" :src="ruleForm.type80" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账授权书(葫芦)" prop="type801" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type801'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type801" :src="ruleForm.type801" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账授权书(瑞银信)" prop="type802" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type802'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type802" :src="ruleForm.type802" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="入账授权书(随行付)" prop="type803" v-if="ruleForm.accountType!=1">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type803'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type803" :src="ruleForm.type803" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="商户收单协议照" prop="type150">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type150'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type150" :src="ruleForm.type150" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item label="商户附属协议" prop="type170">
            <el-upload
                class="avatar-uploader"
                :disabled="disabled"
                :action="domain+'/merchantimg/upload/type170'"
                :show-file-list="false"
                name="imgs"
                :headers="headers"
                :on-success="getAddImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.type170" :src="ruleForm.type170" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img :src="photo_zhengming">
                </i>
            </el-upload>
        </el-form-item>
        <el-form-item v-if="!disabled">
            <el-button type="primary" :loading="formLoading" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="history.go(-1);">取消</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<style>
.avatar-uploader .el-upload { border: 1px dashed #ffffff; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
.avatar-uploader .el-upload:hover { border-color: #409EFF; }
.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 170px; height: 112px; line-height: 112px; text-align: center; }
.avatar { width: 170px; height: 112px; display: block; }
.el-icon-plus img{ width: 170px; height: 112px; position: absolute; left: 0; top: 0;}
</style>

<script>
import { bankList, subBankList, getPosmerchant, addRevPosmerchant } from '@/api/api.verify.js'
import photo_cailiao from "@/assets/images/photo_cailiao.png"
import photo_card from "@/assets/images/photo_card.png"
import photo_mennei from "@/assets/images/photo_mennei.png"
import photo_mentou from "@/assets/images/photo_mentou.png"
import photo_shenfenA from "@/assets/images/photo_shenfenA.png"
import photo_shenfenB from "@/assets/images/photo_shenfenB.png"
import photo_shouchi from "@/assets/images/photo_shouchi.png"
import photo_shouyin from "@/assets/images/photo_shouyin.png"
import photo_zhengming from "@/assets/images/photo_zhengming.png"
import photo_zhizhao from "@/assets/images/photo_zhizhao.png"
import { rawCitiesData } from "@/utils/city-data.js"
import { domain } from "@/utils/config.js"
import { getToken } from '@/utils/auth'


export default {
  name: 'StoreForm',
  data() {
    return {
      photo_cailiao:photo_cailiao,
      photo_card:photo_card,
      photo_mennei:photo_mennei,
      photo_mentou:photo_mentou,
      photo_shenfenA:photo_shenfenA,
      photo_shenfenB:photo_shenfenB,
      photo_shouchi:photo_shouchi,
      photo_shouyin:photo_shouyin,
      photo_zhengming:photo_zhengming,
      photo_zhizhao:photo_zhizhao,
      domain:domain,
      headers:{token:getToken()},
      formLoading:false,//确认按钮
      dataInfo:{},//店铺信息
      areaList:rawCitiesData,//省市区列表
      accountArea: [],//开户行省市区选择数据
      bankList:[],//银行列表
      subBankList:[],//支行列表
      disabled:false,//表单填写状态
      ruleForm: {
        openStatus:1,//商户状态
        merchantShortName:'',//商户简称
        saleAddress:'',//经营地址
        linkName:'',//联系人姓名
        merchantName:'',//线下门店名称，商户全称
        accountType:"2",//0选择/1 对公/2 对法人/3 非法人
        merchantType:"4",//4 企业/5 个体工商户/6 个人
        clusterNo:"",
        bankName:'',//开户银行
        accountProvince:'',//开户行省份
        accountCity:'',//开户行市
        accountCountry: "",//开户行区
        subBranchName:'',//开户支行
        cnapsNo:null,//银行行号
        mobileUsername:'',//登录账号
        transRuleType:'',//商户费率
        d0Flag:"0",//结算类型  /0:D+1  /1:T+1
        province: "",//省
        city: "",//市
        country: "",//区
        area: "",//区编号
        areas: [],//省市区选择数据
        type10:'',//门店门头照
        type20:'',//门店内部经营照
        type30:'',//收银台照
        type40:'',//储蓄卡卡正面照片
        type50:'',//入账人身份证国徽面照片
        type60:'',//入账人身份证人像面照片
        type70:'',//营业执照
        type80:'',//入账授权书
        type801:'',//葫芦非法人结算授权书
        type802:'',//瑞银信非法人结算授权书
        type803:'',//随行付非法人结算授权书
        type90:'',//入账人手持身份证人像面照片
        type100:'',//门店租赁合同
        type110:'',//对公账户许可
        type120:'',//法人证件人像面照片
        type130:'',//法人证件国徽面照片
        type160:'',//法人手持身份证照
        type140:'',//入账人持身份证件照
        type150:'',//商户收单协议照片
        type170:'',//商户附属协议
      },
      rules: {
        merchantName:[
            {required: true, message: '请输入线下门店名称', trigger: 'blur'},
        ],
        merchantShortName: [
            {required: true, message: '请输入商户简称', trigger: 'blur'},
        ],
        linkName: [
            {required: true, message: '请输入联系人姓名', trigger: 'blur'}
        ],
        saleAddress: [
            {required: true, message: '请输入经营地址', trigger: 'blur'},
        ],
        areas: [
            {required: true, message: '请选择门店所在地', trigger: 'change'}
        ],
      },
    }
  },
  created() {
    this.dataInfo=this.$route.query
    this.getStart();
  },
  methods: {
    getStart(){//初始化
      let _this=this;
      bankList({}).then(d=>{//获取银行列表
        _this.bankList=d.data
      });
      if(this.dataInfo.id){
        if(this.dataInfo.tp==0){
            _this.disabled=true;
        }
        let data1={};
        data1.id=this.dataInfo.id
        getPosmerchant(data1,'GET').then(d=>{
          let ruleForm={..._this.ruleForm,...d.data}
          let area=[];
          area[0]=d.data.province;
          area[1]=d.data.city;
          area[2]=d.data.country;
          ruleForm.areas=area;
          let accountArea=[];
          accountArea[0]=d.data.accountProvince;
          accountArea[1]=d.data.accountCity;
          accountArea[2]=d.data.accountCountry;
          _this.accountArea=accountArea;
          _this.ruleForm=ruleForm
          setTimeout(function(){
            _this.ruleForm.licenseCardEnd=d.data.licenseCardEnd
          })//不明原因不显示问题临时解决
        });
      };
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid,object) => {
        if(valid) {
          _this.getForm()
        }else{
          for (const i in object) {
            let dom = this.$refs[i]
            // 这里是针对遍历的情况（多个输入框），取值为数组
            if (Object.prototype.toString.call(dom) !== '[object Object]') { 
              dom = dom[0]
            }
              // 第一种方法（包含动画效果）
              dom.$el.scrollIntoView({ // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: 'center', 
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: 'smooth' 
            });
            break // 跳出循环了
          }
        }
      });
    },
    getForm() {//提交表单
      let _this=this;
      let data=this.ruleForm;
      let method="POST";
      let alerts="添加";
      if(this.dataInfo.id){
          method="PUT";
          alerts="修改";
      };
      this.formLoading=true
      addRevPosmerchant(data,method).then(d=>{
        _this.$message({
            message: alerts+'成功',
            type: 'success'
        });
        setTimeout(function(){
          _this.$router.go(-1)
        },2000)
      }).finally(d=>{
            _this.formLoading=false
        });;
    },
    getAddImage(res) {//上传图片成功返回
        if(res.code==1){
            this.ruleForm[res.data.field] = res.data.imageUrl;
        }else{
            this.$message.error(res.msg);
        }
    },
    getSubBankList(e){//获取开户支行列表
        let _this=this;
        let data={};
        if(e.bankname||e.bankcode){
            this.ruleForm.bankName = e.bankname;
            this.ruleForm.clusterNo = e.bankcode;
        }
        data.headBankName=this.ruleForm.bankName;
        data.size=50;
        data.bankName=e;
        subBankList(data).then(d=>{
            if(d.code==1){
                _this.subBankList=d.data;
            }
        });
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||file.type ==='image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        };
        return isJPG && isLt2M;
    },
    getCnapsNo(e){//获取支行号
        this.ruleForm.cnapsNo=this.subBankList.find(t=>t.subBranchName==e).bankNo;
    },
  },
  watch:{
    'ruleForm.accountType':function(e){
        let _this=this;
        switch(Number(e)){
            case 1://对公
                _this.ruleForm.accountName=_this.ruleForm.licenseName;
                break;
            case 2://对法人
                _this.ruleForm.accountName=_this.ruleForm.lawyer;
                _this.ruleForm.holderCardNo=_this.ruleForm.idCardNo;
                _this.ruleForm.holderCardBgn=_this.ruleForm.lawyerCardBgn;
                _this.ruleForm.holderCardEnd=_this.ruleForm.lawyerCardEnd;
                _this.ruleForm.type60=_this.ruleForm.type120;
                _this.ruleForm.type50=_this.ruleForm.type130;
                _this.ruleForm.type90=_this.ruleForm.type160;
                break;
            case 3://非法人
                // _this.ruleForm.accountName='';
                // _this.ruleForm.holderCardNo='';
                // _this.ruleForm.holderCardBgn='';
                // _this.ruleForm.holderCardEnd='';
                // _this.ruleForm.type60='';
                // _this.ruleForm.type50='';
                // _this.ruleForm.type90='';
                break;
        }
    },
    'ruleForm.areas':function(e){
        let _this=this;
        if(e.length==0){return;};
        try{
            let areaList=_this.areaList;
            let province=areaList.find(t=>t.name==e[0]);//省
            let city=province.sub.find(t => t.name == e[1])//市
            let country=city.sub.find(t => t.name == e[2])//区
            _this.ruleForm.province=e[0];
            _this.ruleForm.city=e[1];
            _this.ruleForm.country=e[2];
            _this.ruleForm.area=country.code;
        }catch(err){
            console.log(err);
        }
    },
    accountArea:function(e){
        let _this=this;
        if(e.length==0){return;};
        try{
            let areaList=_this.areaList;
            let province=areaList.find(t=>t.name==e[0]);//省
            let city=province.sub.find(t => t.name == e[1])//市
            let country=city.sub.find(t => t.name == e[2])//区
            _this.ruleForm.accountProvince=e[0];
            _this.ruleForm.accountCity=e[1];
            _this.ruleForm.accountCountry=e[2];
        }catch(err){
            console.log(err);
        }
    },
    'ruleForm.lawyerCardEnd':function(e){//法人身份证截止还原
        if(e==false){
            this.ruleForm.lawyerCardEnd='';
        }
    },
    'ruleForm.licenseCardEnd':function(e){//营业执照有效期截止还原
        if(e==false){
            this.ruleForm.licenseCardEnd='';
        }
    },
    'ruleForm.holderCardEnd':function(e){//入账人身份证截止还原
        if(e==false){
            this.ruleForm.holderCardEnd='';
        }
    },
  },
}
</script>

